<template>
  <view class="pull-refresh-view">
    <slot :list="list"></slot>
    <view v-if="!pageLoading && noData" class="list-tip-noData">
      <!-- <image/> -->
    </view>
    <view v-else-if="!pageLoading && !hasNextPage && total > 0" class="list-tip">暂无更多数据</view>
    <view v-else class="list-tip">加载中...</view>
  </view>
</template>

<script>
import { debouce } from '@/util/util.js'
// [下拉开启enablePullDownRefresh或设置page->style->app-plus->pullToRefresh](https://uniapp.dcloud.io/collocation/pages)
export default {
  name: 'pull-refresh-view',
  props: {
    /**
     * return promise
     * 父组件fetchFn中的this指向子组件,可使用this.$parent
     * 业务api传参时对齐pageNum,pageSize
     */
    fetchFn: Function,
    /**
     * 处理响应
     * 结果返回格式{list, total, pageNum, pageSize, hasNextPage}
     */
    resFn: Function
  },
  data() {
    return {
      // 结果集
      list: [],
      pageNum: 1,
      pageSize: 10,
      // 接口返回总个数
      total: null,
      //
      hasNextPage: true,
      pageLoading: false
    }
  },
  computed: {
    // totalPages() {
    //   if (this.total === null) return null
    //   const page = this.total / this.pageSize
    //   return Math.ceil(page)
    // },
    // hasNextPage() {
    //   if (this.totalPages === null) return true
    //   return this.pageNum <= this.totalPages
    // },
    noData() {
      return this.total === 0
    }
  },
  mounted(obj) {
    this.fetchList = debouce(this.fetchList, 400)
    this.fetchList(true)
  },
  // 自定义组件貌似无法触发页面级周期事件
  // 可在具体页面内通过ref调用
  // onPullDownRefresh() {
  // 	this.fetchList(true).then(() => {
  // 		uni.stopPullDownRefresh()
  // 	})
  // },
  // onReachBottom() {
  // 	console.warn('onReachBottom')
  // 	this.fetchList()
  // },
  methods: {
    async fetchList(refresh = false) {
      if (refresh) {
        this.pageNum = 1
        this.list = []
        this.total = null
        //
        this.hasNextPage = true
      }
      try {
        if (!this.hasNextPage) return
        this.pageLoading = true
        const res = await this.fetchFn({
          pageNum: this.pageNum,
          pageSize: this.pageSize
        })
        if (res.code === 200) {
          const { list, total, pageNum, pageSize, hasNextPage } = this.resFn ? this.resFn(res.data) : res.data

          this.list = [...this.list, ...list]
          this.total = total
          this.pageNum = pageNum
          this.pageSize = pageSize
          this.hasNextPage = hasNextPage
          if (this.hasNextPage) {
            this.pageNum += 1
          }
        } else {
          uni.showToast({
            icon: 'none',
            title: res.msg
          })
        }
      } catch (error) {
        console.log(error)
      }
      this.pageLoading = false
      // console.log({
      //   list: this.list,
      //   total: this.total,
      //   pageNum: this.pageNum,
      //   pageSize: this.pageSize,
      //   hasNextPage: this.hasNextPage,
      //   pageLoading: this.pageLoading
      // })
    }
  }
}
</script>

<style lang="scss">
.pull-refresh-view {
  .list-tip {
    text-align: center;
    font-size: 24rpx;
    color: #999;
    padding: 30rpx 0;
  }

  .list-tip-noData {
    background: url('#{$BASEURL}/nofind.png') no-repeat;
    background-size: cover;
    width: 570rpx;
    height: 836rpx;
    margin: 0 auto;
  }
}
</style>
